import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import renderModal, {
    getModelValue,
    initModelValue,
    renderForm,
    type FormModalDto
} from '@/components/modal/Modal'
import type { FilterDto } from '@/render/FilterRender'
import { getKeyToEnum, PayModeCnEnum } from '@/const/enum'
import type { CompanyDetailDto, CompanyInfoDto, EleSignInfoDto } from '@/api/company/types'
import { getReceiptData, goBack } from '@/utils/util'
import { getDaliyInsuranceSolutionList } from '@/api/insurance/daily'
import { rechargeElesignAmount } from '@/api/insurance/elesign'
import { Button, message } from 'ant-design-vue'
import SuccessComponent from '../../open-products/components/SuccessComponent'
import { CustomTitle } from '@/components/custom-title/Index'

@Component({
    expose: ['getData']
})
export class EleSignRecharge extends Render {
    @Prop() companyDetail!: CompanyDetailDto

    showRecharge = false
    isSuccess = false
    successHint = ''
    title = '充值电子合同'

    get periodCompanyTypeListValue() {
        const data = getModelValue(this.basicFormConfig)
        return data.periodCompanyTypeList
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('companyDetail', { immediate: true })
    async handleWatch() {
        if (this.companyDetail.channelId) {
            this.basicFormConfig.items.receiptId.options = await getReceiptData(
                this.companyDetail.channelId
            )
        }
    }

    basicFormConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '',
            width: '400px',
            theme: 'light',
            show: false,
            items: {
                payMoney: {
                    name: '金额',
                    element: 'inputNumber',
                    defaultValue: '',
                    params: {
                        min: 1
                    },
                    required: true,
                    span: 12
                },
                rechargeAmount: {
                    name: '份数',
                    element: 'inputNumber',
                    defaultValue: '',
                    params: {
                        min: 1
                    },
                    required: true,
                    span: 12
                },
                payMode: {
                    name: '付款方式',
                    element: 'select',
                    required: true,
                    span: 12,
                    options: getKeyToEnum(PayModeCnEnum)
                },
                receiptId: {
                    name: '收款账号',
                    element: 'select',
                    required: true,
                    span: 12
                },
                voucherUrl: {
                    name: '上传凭证',
                    element: 'upload',
                    params: {
                        autoUpload: false,
                        accept: '.png,.jpg,.jpeg',
                        hint: '大小限制5MB，支持png、jpeg、jpg格式文件'
                    },
                    required: true
                },
                remark: {
                    name: '备注',
                    element: 'textarea'
                }
            },
            complete: async () => {
            },
            cancel: () => {
            },
            init: () => {
                initModelValue(this.basicFormConfig)
            }
        } as FormModalDto
    }
    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }

    filterBtnConfig() {
        return {} as FilterDto
    }

    async insureTypeList(insureCompany: string) {
        return (
            await getDaliyInsuranceSolutionList({
                insureCompany
            })
        ).map((item) => {
            item.label = item.dictLabel
            item.value = item.dictValue
            return item
        })
    }

    async onSubmit() {
        await this.basicForm.validate()
        const params = getModelValue(this.basicFormConfig)
        params.companyId = this.companyDetail.companyId
        if (params.voucherUrl?.length && Array.isArray(params.voucherUrl)) {
            params.voucherUrl = params.voucherUrl[0].base64
        }
        await rechargeElesignAmount(params)
        message.success('充值成功')
        // this.successHint = `已成功为「${this.companyDetail.companyName}」充值了电子合同账户，可在「充值审批」中查看结果`
        this.isSuccess = true
    }

    onShowRecharge() {
        this.showRecharge = true
    }

    created() {
        this.basicForm = renderForm(this.basicFormConfig)
    }

    renderStatistics() {
        return <></>
    }

    renderRightBtns() {
        return <></>
    }


    render() {
        return this.isSuccess ? (
            <div class="flex h-full justify-center items-center">
                <SuccessComponent text="充值成功" hint={this.successHint} />
            </div>
        ) : (
            <div class="flex flex-col gap-20px h-full">
                <div class="flex-1">
                    <CustomTitle>{this.title}</CustomTitle>
                    <div class="mt-20px">{this.basicForm.element()}</div>
                </div>
                <div class="pt-19px flex justify-center gap-20px">
                    <Button onClick={goBack}>取消</Button>
                    <Button type="primary" onClick={this.onSubmit}>
                        确认
                    </Button>
                </div>
            </div>
        )
    }
}
export default toNative<
    { companyDetail: CompanyDetailDto },
    { refresh: () => void }
        >(EleSignRecharge)
